<template>
  <div>
    <div class="flex-between font-14 line-height-3" style="padding-top:20px">
      <div class="col-333333 font-bold-500 font-16 df jcsb">
        <div class="flex">
          <p style="background: #00b8b6" class="fangK"></p>
          推荐工作
        </div>
        <div class="rr" @click="goInfo">
          <div class="tiao" v-if="msgNum>0">{{msgNum}}<van-icon name="plus" size="8" /></div>
          <van-icon name="arrow" />
        </div>
      </div>
    </div>
    <div class="tuijian">

      <div class="tuijian_item" v-for="(item,index) in workList" :key="index">
        <div class="title" @click="gosee(item)">
          <div class="title_l">
            <div class="l1">
              <img src="@/assets/img/sd/yangtou.png" alt="" />
              <span>{{item.cultureArea}}</span>
            </div>
            <div class="l2">羊只数量：{{item.sheepNum}}</div>
          </div>
          <van-icon name="arrow" />
        </div>
        <div class="xian"></div>
        <div class="lists">
          <div class="item" v-for="(item2,index2) in item.stageInfolist" v-if="item2.sheepNum>0" :key="index2" @click="goArrange(item2)">
            <span>{{item2.physiologyStageShow}}({{item2.sheepNum}}只)</span>
            <van-icon name="arrow" />
          </div>
        </div>
      </div>
    </div>
    <title-panel title="养殖管理" />
    <div class="dataList">
      <div v-for="(item, index) in dataOaList" @click="jumpList(item)" :key="index">
        <img width="52px" :src="item.src" />
        <p class="font-13 font-bold-400 line-text-out">{{ item.name }}</p>
      </div>
    </div>
  </div>
</template>
<script>
import { Cell, Icon } from 'vant'
import TitlePanel from './titlePanel'
import { unHandleCount, queryBreedingAreaSheepNum } from '@/api/record.js'
import { getValue, setValue, clearValue } from '@/utils/auth'
export default {
  name: 'JobPlacement',
  components: {
    TitlePanel,
    [Cell.name]: Cell,
    [Icon.name]: Icon
  },
  data() {
    return {
      dataOaList: [
        { name: '饲喂记录', url: 'feedingRecords', src: require('@/assets/img/sd/z1.png') },
        { name: '生长记录', url: 'growthRecord', src: require('@/assets/img/sd/z2.png') },
        { name: '疫苗接种记录', url: 'vaccinesRecord', src: require('@/assets/img/sd/z3.png') },
        { name: '配种记录', url: 'breedingRecord', src: require('@/assets/img/sd/z4.png') },

        { name: '受孕确认记录', url: 'pregnancyConfirmationRecord', src: require('@/assets/img/sd/z5.png') },
        { name: '产羔记录', url: 'lambingRecord', src: require('@/assets/img/sd/z6.png') },
        { name: '采精记录', url: 'ejaculationsRecord', src: require('@/assets/img/sd/z7.png') },
        { name: '产奶记录', url: 'milkRecordManagement', src: require('@/assets/img/sd/z8.png') },

        { name: '转舍记录', url: 'changeCircleRecord', src: require('@/assets/img/sd/z9.png') },
        { name: '养殖区域管理', url: 'breedAreaRecord', src: require('@/assets/img/sd/z10.png') },
        { name: '消毒记录', url: 'disinfectionRecord', src: require('@/assets/img/sd/z11.png') },
        { name: '疾病诊疗记录', url: 'diseaseRecord', src: require('@/assets/img/sd/z12.png') },
        { name: '其他记录', url: 'otherRecords', src: require('@/assets/img/sd/z13.png') }
      ],
      houseInfoId: getValue('fzmHourseId') || '',
      msgNum: '', // 消息条数
      workList: [] // 推荐工作列表
    }
  },
  created() {
    this.loadMsgList()
    this.loadWorkList()
  },
  methods: {
    // done: 加载消息列表
    loadMsgList() {
      unHandleCount({ houseInfoId: this.houseInfoId }).then(res => {
        if (res.status === 0) {
          this.msgNum = res.data
        }
      })
    },
    loadWorkList() {
      queryBreedingAreaSheepNum({ houseId: this.houseInfoId }).then(res => {
        if (res.status === 0) {
          console.log(res)
          this.workList = res.data.rows
        }
      })
    },
    // done:去查看羊列表
    gosee(item) {
      if (item.sheepNum === 0) {
        return
      }
      clearValue('fzmBreedingArea')
      clearValue('fzmBreedStageInfoId')

      setValue('fzmBreedingArea', item.cultureArea)
      this.$bridge.call('sheepSeeQy')
    },
    jumpMore() {
      this.$bridge.call('warningDetails')
    },
    jumpList(item) {
      if (item) {
        this.$bridge.call(item.url)
      }
    },
    goArrange({ id, sheepNum }) {
      if (sheepNum === 0) {
        return
      }
      clearValue('fzmBreedingArea')
      clearValue('fzmBreedStageInfoId')

      setValue('fzmBreedStageInfoId', id)
      this.$bridge.call('arrangeDetail')
    },

    goInfo() {
      this.$bridge.call('messageList')
    }
  }
}
</script>
<style lang="scss" scoped>
.content2 {
  background-color: transparent;
  padding: 10px 0;
}
.df {
  display: flex;
  width: 100%;
  padding-right: 10px;
}
.rr {
  display: flex;
  align-items: center;
  font-size: 8px;
}
.jcsb {
  justify-content: space-between;
}
.tiao {
  background-color: #ff7a7a;
  border-radius: 20px;
  padding: 0 5px;
  height: 15px;
  line-height: 14px;
  color: #ffffff;
}
.ld {
  width: 20px;
  height: 20px;
}
.flex {
  align-items: center;
}
.fangK {
  width: 4px;
  height: 14px;
  margin-right: 10px;
  margin-top: -2px;
  border-radius: 1px;
}
.tuijian {
  padding: 15px 0 15px 15px;
  box-sizing: border-box;
  width: 100%;
  overflow-x: scroll;
  overflow-y: hidden;
  flex-shrink: 0;
  white-space: nowrap;
  &::-webkit-scrollbar {
    display: none;
  }
  display: flex;
  .tuijian_item {
    background: #ffffff;
    margin-right: 10px;
    width: 200px;
    height: 210px;
    border-radius: 6px;
    padding: 0 10px;
    .title {
      height: 75px;
      padding: 12px 0 15px 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .title_l {
        .l1 {
          margin-bottom: 10px;
          img {
            width: 14px;
            height: 14px;
            margin-right: 6px;
          }
        }
        .l2 {
          font-size: 13px;
          color: #666666;
        }
      }
    }
    .xian {
      width: 100%;
      height: 1px;
      background-color: #eeeeee;
    }
    .lists {
      padding-top: 4px;
      .item {
        padding: 10px 0;
        display: flex;
        align-items: center;
        font-size: 13px;
        color: #666666;
        justify-content: space-between;
      }
    }
  }
}
.noData {
  color: #999999;
  text-align: center;
  font-size: 13px;
}
.van-cell {
  line-height: 35px;
  border: none !important;
}
.content {
  padding: 5px 15px;
  margin-top: 0;
  margin-bottom: 10px;
  box-shadow: none;
  width: 93%;
}
.dataList {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  > div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 25%;
    margin-bottom: 12px;
    > p {
      margin-top: 8px;
      color: #1b1b1b;
    }
  }
}
.line-text-out {
  width: 90%;
  text-align: center;
}
</style>
